<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>新闻详情</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f5f5f5;
            color: #333;
            font-size: 14px;
        }
        .header {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            background-color: white;
            border-bottom: 1px solid #eee;
        }
        .header-back {
            margin-right: 10px;
            font-size: 12px;
            color: #666;
        }
        .header-title {
            flex: 1;
            font-size: 16px;
            font-weight: bold;
        }
        .header-more {
            font-size: 12px;
            color: #666;
        }
        .content {
            padding: 15px;
        }
        .news-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .news-info {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        .news-source {
            margin-right: 10px;
            font-size: 12px;
            color: #666;
        }
        .news-time {
            font-size: 12px;
            color: #999;
        }
        .news-content {
            line-height: 1.6;
            margin-bottom: 15px;
        }
        .news-content p {
            margin-bottom: 15px;
        }
        .action-bar {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-top: 1px solid #eee;
        }
        .action-btn {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #666;
            cursor: pointer;
        }
        .action-btn img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }
        #message {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            display: none;
        }
        .news-content img {
            max-width: 100%;
            max-height: 300px;
            object-fit: contain;
        }
    </style>
</head>
<body>
<div id="message"></div>
<div class="header">
    <div class="header-back" onclick="goBack()">←</div>
    <div class="header-title"></div>
    <div class="header-more"></div>
</div>
<div class="content">
    <h1 class="news-title" id="detail-title"></h1>
    <div class="news-info">
        <div class="news-source">webview+html5</div>
        <div class="news-time" id="detail-time"></div>
    </div>
    <div class="news-content">
        <p id="detail-full-content"></p>
        <img id="detail-image" src="" alt="新闻配图">
    </div>
    <div class="action-bar">
        <div class="action-btn" onclick="collectNews()">
            <img src="..\pic\shou_cang.png" alt="收藏">
            收藏
        </div>
        <div class="action-btn" onclick="shareNews()">
            <img src="..\pic\fen_xiang.png" alt="分享">
            分享
        </div>
        <div class="action-btn" onclick="likeNews()">
            <img src="..\pic\dian_zan.png" alt="点赞">
            点赞
        </div>
    </div>
</div>
<script>
    // 返回上一页
   function goBack() {
       // 优先尝试前端返回
       if (window.history.length > 1) {
           window.history.back();
       } else {
           // 前端无历史时，调用 Android 接口返回
           if (window.myInterface) {
               window.myInterface.goBack();
           } else {
               alert("无法返回上一页");
           }
       }
   }
   // 显示提示信息
   function showMessage(message) {
       const messageElement = document.getElementById('message');
       messageElement.textContent = message;
       messageElement.style.display = 'block';
       setTimeout(() => {
           messageElement.style.display = 'none';
       }, 2000); // 2 秒后隐藏提示信息
   }
   // 收藏新闻
   function collectNews() {
       showMessage('新闻已收藏');
   }
   // 分享新闻
   function shareNews() {
       showMessage('新闻已分享');
   }
   // 点赞新闻
   function likeNews() {
       showMessage('点赞成功');
   }
   // 设置新闻内容
   function setNewsContent(content) {
       const fullContentElement = document.getElementById('detail-full-content');
       fullContentElement.textContent = content;
   }
   // 页面加载时设置新闻详情
   window.addEventListener('DOMContentLoaded', () => {
       const urlParams = new URLSearchParams(window.location.search);
       const newsParam = urlParams.get('news');
       if (newsParam) {
           try {
               const newsData = JSON.parse(decodeURIComponent(newsParam));
               // 直接设置新闻内容和图片
               document.getElementById('detail-title').textContent = newsData.title;
               document.getElementById('detail-time').textContent = newsData.time;
               document.getElementById('detail-full-content').textContent = newsData.content;
               const newsImage = document.getElementById('detail-image');
               newsImage.src = newsData.image;
               newsImage.alt = newsData.title + '配图';
           } catch (e) {
               console.error('解析新闻数据失败:', e);
               // 备用方案：通过标题查询
               const title = urlParams.get('title');
               if (title) {
                   loadNewsByTitle(title);
               }
           }
       } else {
           // 原始逻辑：通过URL参数获取标题并查询
           const title = urlParams.get('title');
           const time = urlParams.get('time');
           if (title) {
               document.getElementById('detail-title').textContent = title;
               document.getElementById('detail-time').textContent = time;
               loadNewsByTitle(title);
           }
       }
   });

   function loadNewsByTitle(title) {
       // 调用Android接口获取新闻内容
       window.myInterface.getNewsContent(title);
       // 调用Android接口获取新闻图片路径
       const imagePath = window.myInterface.getNewsImagePath(title);
       if (imagePath) {
           const newsImage = document.getElementById('detail-image');
           newsImage.src = imagePath;
           newsImage.alt = title + '配图';
       }
   }
</script>
</body>
</html>